<template>
  <div>
    <div>
      <el-button type="primary" @click="dialogFormVisible = true"
        >+主要按钮</el-button
      >
    </div>
    <div>
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="rname" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="菜单类型 ">
            <el-radio v-model="radio" label="1">接口</el-radio>
            <el-radio v-model="radio" label="2">页面</el-radio>
          </el-form-item>

          <div v-if="radio == 1">
            <el-form-item label="菜单路径" :label-width="formLabelWidth">
              <el-input v-model="url" autocomplete="off"></el-input>
            </el-form-item>
          </div>

          <div v-if="radio == 2">
            <el-dropdown>
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <div>
      <template>
        <el-table :data="like" style="width: 100%">
          <el-checkbox v-model="checked"></el-checkbox>
          <el-table-column prop="id" label="序号" width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="rname"
            label="角色名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="pid"
            label="角色编号"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="时间"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="type" label="类型" width="180" align="center">
          </el-table-column>
          <el-table-column width="250" align="center">
            <el-button @click="dialogFormVisible1 = true">配置权限</el-button>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <div>
      <el-dialog title="新增" :visible.sync="dialogFormVisible1">
        <el-transfer v-model="value" :data="data"></el-transfer>
        {{ value }}
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">关闭</el-button>
          <el-button type="primary" @click="dialogFormVisible1 = false"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      rname: "",
      like: [],
      url: "",
      num: "1",
      radio: "1",
      checked: true,
      data: [
        { key: 1, label: "111", disabled: 0 },
        { key: 2, label: "111", disabled: 0 },
        { key: 3, label: "111", disabled: 0 },
        { key: 4, label: "111", disabled: 0 },
        { key: 5, label: "111", disabled: 0 },
      ],
      value: [],
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    axios
      .get("http://127.0.0.1:8010/api/mall/v1/admin/role/add/show")
      .then((result) => {
        this.like = result.data.data.items;
        console.log(result);
      })
      .catch((err) => {
        console.log(err);
      });
  },

  methods: {},

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
* {
  margin: 0;
}
</style>
